<template lang="pug">
  .briefRecipe
    .searchBox
      form-box(
        :isFilter="true"
        :fields="searchItems"
        :showBtns="false"
        :submitHandle="searchHandle"
      )
      .table-operator
        el-button.gradientVertical(size="large" round @click="addHandle()") 添加
        <!--el-button.gradientVertical(size="large" round @click="deleteHandle()") 删除-->
    el-checkbox-group(v-model="selectedKeys" v-loading="loading")
      el-row(:gutter="24")
        el-col(:span="8" v-for="item in list" :key="item.id")
          .recipeItem
            .imgBox
              a-image(height="248px" :url="item.resURL")
              .btn-box
                <!--el-button(icon="el-icon-edit" circle @click.stop="addHandle(item.id, 'edit', item)")-->
                el-button(icon="el-icon-delete" circle @click.stop="delHandle(item.id)")
            .detail
              h3 {{item.title}} {{item.beginAt | dateFilter('YYYY.MM.DD')}}至{{item.endAt | dateFilter('YYYY.MM.DD')}}
              p
                i.mr5(class="el-icon-time")
                | {{item.created | dateFilter}}

    <div class="quesheng" v-if="!loading&&list.length<=0">
      <img src="@/assets/quesheng.png" alt="">
      <span>暂无数据</span>
    </div>
    p.tr
      el-pagination(
        hide-on-single-page
        prev-text="上一页"
        next-text="下一页"
        :pageSizes="[5, 10, 20, 30, 40, 50, 100]"
        layout='slot, prev, pager, next, jumper'
        :page-size="pagination.pageSize"
        :total="pagination.total"
        @current-change="val => getList({ pageNum: val - 1 })"
      )
    add-drawer(:visible.sync="modalObj.visible" @getList="searchHandle")
</template>
<script>
import AImage from '@/components/Basic/Image'
import { briefSearchItems } from '../config'
import AddDrawer from './addDrawer'
import { getBriefList, briefDelete } from '../api'

export default {
  components: {
    AImage,
    AddDrawer
  },
  data () {
    return {
      loading: false,
      searchItems: briefSearchItems(),
      list: [],
      modalObj: {
        visible: false
      },
      filterData: {},
      pagination: {
        pageNum: 0,
        pageSize: 6,
        total: 0
      },
      selectedKeys: []
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList (params = {}) {
      const { pagination, filterData } = this
      this.loading = true
      getBriefList({ ...pagination, ...filterData, ...params }).then(res => {
        this.list = res.content || []
        this.pagination = {
          pageNum: res.number + 1,
          pageSize: res.size,
          total: res.totalElements
        }
      }).finally(() => {
        this.loading = false
      })
    },
    searchHandle (values) {
      this.filterData = values
      this.getList({ ...values, pageNum: 0 })
    },
    addHandle () {
      this.modalObj = {
        visible: true
      }
    },
    delHandle (id) {
      this.$confirm(`您确认要删除选中的食谱吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        briefDelete({ ids: id }).then(() => {
          this.$message.success('删除成功')
          this.selectedKeys = []
          this.getList({ pageNum: 0 })
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.searchBox{
  display: flex;
  flex-direction: row;
  position: relative;
  padding-bottom: 0;
  place-content: flex-end;
  justify-content: space-between;
  margin-bottom: 20px;
}

.recipeItem{
  position: relative;
  margin-bottom: 20px;

  .imgBox{
    position: relative;

    .btn-box{
      position: absolute;
      right: 10px;
      bottom: 10px;
    }
  }

  ::v-deep{
    .el-checkbox__label{
      width: 100%;
      display: block;
      padding-left: 0
    }

    .el-checkbox__input, .el-radio__input{
      display: none;
    }

  }

  .detail{
    padding: 0;
    margin-top: 20px
  }

  h3 {
    margin-top: 0;
    font-size: 17px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    height: 40px;
    line-height: 20px;
    overflow: hidden;
  }

  p {
    color: #999999;
    font-size: 13px;
  }

  .checkedSpan{
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    z-index: 10;

    &::before{
      content: '';
      display: none;
      position: absolute;
      border: 24px solid transparent;
      border-left-color: $--border-color-lighter;
      border-top-color: $--border-color-lighter;
    }

    i {
      color: #fff;
      position: relative;
      z-index: 10;
      left: 6px;
      top: 6px;
      display: none;
      font-weight: bolder;
      font-size: 16px;
    }

    &.active{
      &::before{
        content: '';
        display: block;
        position: absolute;
        border: 24px solid transparent;
        border-left-color: $--color-primary;
        border-top-color: $--color-primary;
      }

      i {
        display: inline-block;
      }
    }
  }

}
.quesheng{
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  img{
    margin-bottom: 12px;
  }
}
</style>
